<template>
	<label
		class="md-check"
		:class="{
			'is-disabled': disabled,
			'is-checked': isChecked
		}"
		@click="$_onClick"
	>
		<div class="md-check-icon">
			<ynet-icon :name="currentIcon" :size="size" :svg="iconSvg"/>
		</div>
		<div class="md-check-label" v-if="$slots.default || label">
			<slot>{{ label }}</slot>
		</div>
	</label>
</template>
<script>
	import Icon from '../icon'
	import checkMixin from './mixin'
	export default {
		name: 'ynet-check',
		mixins: [checkMixin],
		components: {
			[Icon.name]: Icon
		},
		props: {
			name: {
				type: String,
				default: '',
			},
			value: {
				type: Array,
				default(){
					return []
				}
			},
			size: {
				type: String,
				default: 'md'
			},
			label: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		computed: {

			eq() {
				return this.value.indexOf(this.name)
			},

			isChecked() {
				return this.eq !== -1
			},

			currentIcon() {
				return this.disabled ? this.iconDisabled : this.isChecked ? this.icon : this.iconInverse
			}
		},

		methods: {
			$_onClick() {
				if(this.disabled) {
					return true
				}
				const currentEq = this.eq
				const currentValue = [...this.value]
				if(this.isChecked) {
					currentValue.splice(currentEq, 1)
				}else {
					currentValue.push(this.name)
				}
				this.$emit('input', currentValue)
			}
		}
	}
</script>
<style lang="stylus">
.md-check
  display flex
  align-items center
  margin-top v-gap-sm
  margin-bottom v-gap-sm
  &.is-checked
    .md-check-icon
      color check-color
  &.is-disabled
    .md-check-icon
    .md-check-label
      color color-text-disabled
.md-check-icon
  position relative
  color color-text-placeholder
  .md-icon
    display flex
.md-check-label
  margin-left h-gap-sm
  font-size inherit
</style>